<template>
    <el-form
            label-width="100px"
            class="my-form"
            size="mini"
            label-position="left"
    >
        <el-form-item label="部门职位">
            <div class="inline-box">
                <div v-for="(tag, index) in depatment_role_name" :key="index">
                    <el-input
                            class="input-new-tag"
                            v-if="editable[index]"
                            v-model="tag.label"
                            :ref="'editableInput' + index"
                            size="small"
                            placeholder="请输入职位"
                            @keyup.enter.native="handleEditableInputConfirm(tag, index)"
                            @change="handleEditableInputConfirm(tag, index)"
                            @blur="handleEditableInputBlur(tag, index)"
                            show-word-limit
                    ></el-input>
                    <el-tag
                            v-else
                            @click="showEditTagInput(index)"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag, index)"
                    >{{ tag.label }}</el-tag
                    >
                </div>
                <div>
                    <el-input
                            class="input-new-tag"
                            v-if="inputVisible"
                            v-model="inputValue"
                            ref="saveTagInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm"
                            maxlength="20"
                            show-word-limit
                    ></el-input>
                    <el-button
                            v-else
                            class="button-new-tag"
                            size="small"
                            @click="showInput"
                    >+ 新增职位</el-button
                    >
                </div>
            </div>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "InputSearch",
        data() {
            return {
                depatment_role_name: [
                    {
                        value: 1,
                        label: "选择1",
                    },
                    {
                        value: 2,
                        label: "选择2",
                    },
                    {
                        value: 3,
                        label: "选择3",
                    },
                ],
                inputVisible: "",
                editable: [],
                inputValue: "",
            };
        },
        methods: {
            //============添加职位=====================
            //添加 职位信息  input显示
            showInput() {
                this.inputVisible = true;
                this.$nextTick((_) => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            //添加 职位信息 input失去焦点
            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    var tagInfo = {
                        label: inputValue,
                        value: this.depatment_role_name.length + 1,
                    };
                    this.depatment_role_name.push(tagInfo);
                }
                this.inputVisible = false;
                this.inputValue = "";
            },
            //============编辑职位=====================
            //编辑 职位信息 input显示
            showEditTagInput(index) {
                this.$set(this.editable, index, true);
                this.$nextTick((_) => {
                    var editableInput = "editableInput" + index;
                    this.$refs[editableInput][0].$refs.input.focus();
                });
            },
            //编辑 职位信息 input发生改变
            handleEditableInputConfirm(item, index) {
                if (item.label) {
                    this.$set(this.editable, index, false);
                } else {
                    this.$message({ message: "请输入职位信息", type: "info" });
                }
            },
            //编辑 职位信息 input失去焦点
            handleEditableInputBlur(item, index) {
                this.$set(this.editable, index, false);
            },
            //删除部门职位
            handleClose(tag, index) {
                this.depatment_role_name.splice(index, 1);
            },
        },
    }
</script>

<style scoped>
 /deep/   .inline-box {
        display: flex;
    }
 /deep/   .inline-box > div {
        margin-right: 5px;
    }
</style>